// 这是调用页面，data传进组件中
<template>
    <div>
        <drag-control />
        <drag-layout :baseLayout="baseLayout" :swicthList="swicthList" />
    </div>
</template>

<script>
import DragControl from '@/components/DragLayout/DragControl.vue'
import DragLayout from '@/components/DragLayout/DragLayout.vue'
export default {
    name: 'Index',
    components: {
        DragControl,
        DragLayout,
    },
    data() {
        return {
            // 初始布局配置，用于恢复布局
            baseLayout: [
                { layerId: 1, componentName:'com1'},
                { layerId: 2, componentName:'com2'},
                { layerId: 3, componentName:'com3'},
                { layerId: 4, componentName:'com4'}
            ],
            // 所有备选组件配置
            swicthList:[
                {
                    componentName:'com1',
                    size: '420 x 250',
                    content: '佛哥简介',
                    isChecked: false
                },
                {
                    componentName:'com2',
                    size: '320 x 250',
                    content: '佛哥生平',
                    isChecked: false
                },
                {
                    componentName:'com3',
                    size: ' 760 x 250',
                    content: '佛哥阅历',
                    isChecked: false
                },
                {
                    componentName:'com4',
                    size: ' 760 x 250',
                    content: '联系佛哥',
                    isChecked: false
                },
            ]
        }
    }
}
</script>
